<template>
  <div id="datetime">
    <!--<input type="text" placeholder="点击选择时间" id="timeinput" @click="inputClickShow()" ref="timeinput"/>-->
    <div tabindex="-1" id="choose-container" ref="focusPanel">
      <div class="date-box">
        <div id="control-area">
                    <span id="left-btn-area">
                        <img :src="preYearSrc" @click="year -= 1;">
                        <img :src="preMonthSrc" @click="setMonth(month-1)">
                    </span>
          <span id="year-month-indicator">
                        <span>{{year}}年</span>
                        <span>{{month}}月</span>
                    </span>
          <span id="right-btn-area">
                        <img :src="nextMonthSrc" @click="setMonth(month+1)"/>
                        <img :src="nextYearSrc" @click="year+=1"/>
                    </span>
        </div>
        <div id="week-area">
          <span>日</span>
          <span>一</span>
          <span>二</span>
          <span>三</span>
          <span>四</span>
          <span>五</span>
          <span>六</span>
        </div>
        <div id="days-area">
                    <span v-for="(i, index) in monthDays" :key="index"
                          :class="{
                            gray: isInteractive(i),
                            active:choosedDay === i.number &&i.isThisMonth}"
                          @click="chooseDay(i.number, !isInteractive(i))">{{i.number}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import config from '../../myconf';
  import eventBus from '../../util/event-bus';
  import DateTimeHelper from '../../util/datetime-helper';
  import {mapState, mapMutations, mapGetters} from 'vuex'

  export default {
    name: 'Calendar',
    data() {
      return {
        preYearSrc: 'static/images/index/pre-year.png',
        nextYearSrc: 'static/images/index/next-year.png',
        preMonthSrc: 'static/images/index/pre-month.png',
        nextMonthSrc:'static/images/index/next-month.png',
        panelShow: true,
        month: 10,
        year: 2099,
        choosedDay: 1,
      }
    },
    props:{
      calendar:{
        type: Object,
        required: true
      },
      /*rangeDown: {
        type: Object,
        required: false
      },
      rangeUp: {
        type: Object,
        required: false
      }*/
    },
    mounted() {
      this.setChooseDate();
    },
    computed: {
      monthDays: function () {
        let arr = [];

        var d = new Date(this.year, this.month, 0);  //这个是都可以兼容的


        var dPre = null;
        var dNext = null;

        if (this.month === 1) {
          dPre = new Date(this.year - 1, 12, 0);
        } else {
          dPre = new Date(this.year, this.month - 1, 0);
        }

        if (this.month === 12) {
          dNext = new Date(this.year + 1, 1, 0);
        } else {
          dNext = new Date(this.year, this.month + 1, 0);
        }


        let tmpDate = null;
        if (this.month === 1) {
          tmpDate = new Date(this.year - 1, 12, 1)
        } else {
          tmpDate = new Date(this.year, this.month - 1, 1)
        }
        let day = tmpDate.getDay();//计算一周内的星期几  对应为  0 1 2 3 4 5 6   日 一 二 三 四 五 六
        if (day != 0) {
          let preDay = dPre.getDate();
          for (let i = day - 1; i >= 0; i--) {
            arr.push({
              isThisMonth: false,
              number: preDay - i
            });
          }
        }

        for (let i = 1; i <= d.getDate(); i++) {
          arr.push({
            isThisMonth: true,
            number: i
          })
        }
        return arr;

      }
    },
    methods: {
      isInteractive(i) {
        let afterDate = this.year + "-" + this.month + "-" + i.number;
        let isAfter = DateTimeHelper.getAfterDayNew(afterDate);
        return !i.isThisMonth
        || this.month < DateTimeHelper.get3MonthBefor().month
        || this.year < DateTimeHelper.get3MonthBefor().year
        || i.number < DateTimeHelper.get3MonthBefor().day
        ||isAfter
      },
      setChooseDate(){
          this.year = this.calendar.year;
          this.month = this.calendar.month;
          this.choosedDay = this.calendar.day;
      },
      setMonth(month) {
        if (month === 0) {
          this.month = 12;
          this.year -= 1;
        } else if (month === 13) {
          this.month = 1;
          this.year += 1;
        } else {
          this.month = month;
        }
//        this.confirm();
      },
      chooseDay(day, flag) {
        if (!flag) {
          return
        }

        this.choosedDay = day;
        this.confirm();
      },
      confirm() {
        this.$emit('timeEvent', {
          year: this.year,
          month: this.month,
          day: this.choosedDay
        });
      },


    },
    watch: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "../../../static/common/common.scss";
  div:focus {
    outline: none
  }

  /*.active {
      background-color: rgba(255, 255, 255, 0.4);
  }*/

  #datetime {
    position: absolute;
    left: -2px;
    top: 35px;
    background-color: #191e30;
    @include inputBorder;
    #timeinput {
      width: 170px;
      display: inline-block;
      border: none;
      font-size: 16px;
      background: transparent;
      color: #9ffcf5;
    }

    #choose-container {
      display:flex;

      .date-box{
        width: 230px;
        height: 245px;
        /*float: left;*/
        flex-grow:1;
        flex-shrink: 0;

        #control-area {
          height: 40px;
          line-height: 45px;
          padding:0 10px;
          width: 100%;
          overflow: hidden;
          box-sizing: border-box;
          border-bottom: none;

          span {
            display: inline-block;
            vertical-align: middle;
          }

          #left-btn-area {
            img {
              cursor: pointer;
            }
          }

          #year-month-indicator {
            margin: -10px 0 0 15px;
            span {
              vertical-align: bottom;
            }
          }

          #right-btn-area {
            float: right;
            margin-top: 2px;
            img {
              cursor: pointer;
            }
          }
        }

        #week-area {
          height: 30px;
          background: rgba(122, 233, 229, .2);
          display:flex;
          justify-content: center;
          span {
            /*float: left;*/
            display:inline-block;
            /*flex:0 0 38px;*/
            width: 30px;
            text-align: center;
            line-height: 30px;
            color: #7AE9E5;
            /*box-sizing: border-box;*/
          }
        }

        #days-area {
          display:flex;
          flex-wrap: wrap;
          border-bottom: none;
          width:220px;
          padding-left: 6px;
          margin:0 auto;
          span {
            /*flex:0 0 38px;*/
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            overflow: hidden;
            span:hover {
              color: red;
            }
            &.active{
              background-color: rgba(66, 141, 172, 0.5);
              border: 1px solid #438dad;
              border-radius: 50%;
            }
          }

          .gray {
            color: #2D7A75;
          }
        }

        #time-indicator-area {
          text-align: center;
          height: 30px;
          line-height: 30px;
          box-sizing: content-box;
          border-bottom: 1px solid #9ffcf5;
        }
      }

      .hour-box{
        /*float: left;*/
        /*width: 153px;*/
        overflow-x: hidden;

        #hour-choose-area {
          width: calc(100% + 12px);
          height: 296px;
          padding-left: 20px;
          padding-top: 2px;
          border-bottom: none;
          overflow-y: auto;
          box-sizing: border-box;

          span {
            display: inline-block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
            box-sizing: border-box;
            transition: all ease .1s;

            span:hover {
              color: red;
            }
            &.active{
              background-color: rgba(27, 145, 145,.8);
              border: 1px solid #20DDC9;
              border-radius: 15px;
              transition: all ease .2s;
            }
          }
        }

        #confirm-area {
          height: 30px;
          line-height: 30px;
          background-color: rgba(255, 255, 255, 0.2);
          cursor: pointer;
          text-align: center;
        }

        #confirm-area:hover {
          background-color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
  #timeinput::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #9ffcf5;
  }

  #timeinput:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #9ffcf5;
  }

  #timeinput::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #9ffcf5;
  }

  #timeinput:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #9ffcf5;
  }
</style>
